<template>
  <div>
    <div class="box">
        <h3>欢迎光临vue的水果店</h3>
        <p>苹果10￥/斤，折扣8折</p>
        <span>请输入你要购买的斤数:</span> 
        <input v-model.number="num" type="text">
        <br>
        <button @click="buyFn">结账买单</button>
        <br>
        总账单：总价：<span>{{ price }}</span>￥元，折后价：<span>{{ price * 0.8}}</span>￥元，省了：<span>
          {{ price - price * 0.8}}
          </span>￥元
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        num:'',
        price:'',
      }
    },
    methods:{
      buyFn(){
        this.price = this.num *10
      }
    }
}
</script>

<style scoped>
   .box {
    line-height: 40px;
    text-align: center;
    width: 500px;
    height: 300px;
    border: 2px solid #000;
   }
</style>